<template>
	<div class="temp">
		<div class="temp-link clearfix">
			<a href="javascipt:;" v-for="item in tabData" @click="selectTabs(item.tab_item)" :class="{active:currentView==item.tab_item}">{{ item.title }}</a>
			<!--<Dropdown trigger="click" @on-click='doMore'>
		        <a :class="{active:currentView == 'Analysis' || currentView == 'Plan' || currentView == 'LifeStyle'}" href="javascript:void(0)">
		        	改善方案<Icon type="ios-arrow-down"></Icon> 
		        </a>
			    <DropdownMenu slot="list" v-show="isShow">
			        <DropdownItem name='Analysis'>
			        	疾病分析及管理目标
			        </DropdownItem>
			        <DropdownItem name='Plan'>
			        	干预计划
			        </DropdownItem>
			        <DropdownItem name='LifeStyle'>
			        	生活方式及改善建议
			        </DropdownItem>
			    </DropdownMenu>
	    	</Dropdown>-->
		</div>
		<transition name="fade" mode="out-in">
			<component :is="currentView"></component>
		</transition>
	</div>
</template>

<script>
	import Info from './Info.vue'; // 档案信息
	import Datamonitor from './Datamonitor.vue'; //  数据监测 
	import Case from './Case.vue'; //  病历详情 
	import Improve from './Improve.vue'
	import Websocket from './WebSocket.vue'

	//  下拉菜单组件
	//	import Analysis from './improveCom/Analysis.vue'  //  疾病分析及管理目标
	//	import Plan from './improveCom/Plan.vue'			//   干预计划
	//	import LifeStyle from './improveCom/LifeStyle.vue'		//  生活方式及改善建议

	export default {
		components: {
			Info,
			Datamonitor,
			Case,
			Improve,
			Websocket
			//			下拉菜单组件,
			//			Analysis,
			//			Plan,
			//			LifeStyle
		},
		data() {
			return {
				currentView: "Info",
				tabData: [{
						title: '档案信息',
						tab_item: 'Info'
					},
					{
						title: '数据监测',
						tab_item: 'Datamonitor'
					},
					{
						title: '病历详情',
						tab_item: 'Case'
					},
					{
						title: '改善方案',
						tab_item: 'Improve'
					},
					{
						title: '在线咨询',
						tab_item: 'Websocket'
					}
				]
			}
		},
		methods: {
			selectTabs(tab) {
				this.currentView = tab;
			},
			//			doMore(name){
			//				this.currentView = name
			//			}
		}
	}
</script>

<style lang="less" scoped>
	.temp {
		width: 100%;
		height: 100%;
		.temp-link {
			border-bottom: 1px solid #dddee1;
			margin-bottom: 24px;
			a {
				float: left;
				padding: 0 20px;
				height: 60px;
				color: #495060;
				line-height: 60px;
				border-bottom: 2px solid transparent;
				margin-bottom: 0;
				&:hover,
				&.active {
					border-bottom-color: #0b9595;
				}
			}
		}
		.actives {
			border-bottom-color: #0b9595;
			display: block;
		}
	}
</style>